<template>
  <div class="box">
    <!-- 搜索信息-->
    <div class="top">
      <el-form :inline="true" :model="queryParams" prop="reportFiller" class="demo-form-inline">
        <el-form-item label="填报人">
          <el-input
            v-model="queryParams.reportFiller"
            placeholder="填报人">
          </el-input>
        </el-form-item>
        <el-form-item label="事件类型" prop="reviewEventType">
          <el-select v-model="queryParams.reviewEventType" placeholder="请选择">
            <el-option
              v-for="item in eventTypeoption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理情况">
          <el-select v-model="queryParams.handlingInformation" placeholder="请选择">
            <el-option
              v-for="item in handlingInformationoption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件等级">
          <el-select v-model="queryParams.eventLevel" placeholder="请选择">
            <el-option
              v-for="item in eventLeveloption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上报类型">
          <el-select v-model="queryParams.reportType" placeholder="请选择">
            <el-option
              v-for="item in reportTypeoption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-switch
            v-model="queryParams.value1"
            active-text="全部上报"
            inactive-text="我的上报">
          </el-switch>
        </el-form-item>
        <el-form-item>
          <el-radio-group v-model="queryParams.operate">
            <el-radio label="全部"></el-radio>
            <el-radio label="我部需处理"></el-radio>
            <el-radio label="我部需协助"></el-radio>
            <el-radio label="我部上报"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上报部门" style="margin-left: 25px">
          <el-select v-model="queryParams.reportDepartment" placeholder="请选择">
            <el-option
              v-for="item in reportDepartmentoption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理部门">
          <el-select v-model="queryParams.processDepartment" placeholder="请选择">
            <el-option
              v-for="item in processDepartmentoption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="协助部门">
          <el-select v-model="queryParams.assistDepartment" placeholder="请选择">
            <el-option
              v-for="item in assistDepartmentoption"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 50px">
          <el-button type="primary" @click="handleQuery" size="small" plain>查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主页信息   -->
    <div class="body">
      <el-table :data="tableData" height="640" border style="width: 100%">
        <el-table-column
          prop="number"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="eventStatus"
          label="事件状态"
          width="180">
        </el-table-column>
        <el-table-column
          prop="eventDetails"
          label="事件">
          <template slot-scope="{row}">
            <a href="#/shijianxiangqing" class="lianjie">{{ row.eventDetails }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="eventLevel"
          label="事件等级">
        </el-table-column>
        <el-table-column
          prop="reportDepartment"
          label="上报科室">
        </el-table-column>
        <el-table-column
          prop="submitDepartment"
          label="呈送科室">
        </el-table-column>
        <el-table-column
          prop="informant"
          label="填报人">
        </el-table-column>
        <el-table-column
          prop="time"
          label="时间">
        </el-table-column>
      </el-table>
      <!--  页码显示-->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      // 总条数
      total: 0,
      currentPage4: 1,
      activeName: 'first',
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        reportFiller:'',
        reviewEventType:'',
        handlingInformation:'',
        eventLevel:'',
        reportType:'',
        operate:'',
        reportDepartment:'',
        processDepartment:'',
        assistDepartment:''
      },
      tableData: [{
        number: 1,
        eventStatus: 1,
        eventDetails: 1,
        eventLevel: 1,
        reportDepartment: 1,
        submitDepartment: 1,
        informant: 1,
        time: 1
      }],
      eventTypeoption: [
        {value: '患者事件',},
        {value: '整改事件'},
        {value: '管理事件'}
      ],
      handlingInformationoption: [
        {value: '待处理',},
        {value: '处理中'},
        {value: '处理完成'},
        {value: '已作废'}
      ],
      eventLeveloption: [
        {value: '全部',},
        {value: 'Ⅰ级事件'},
        {value: 'Ⅱ级事件'},
        {value: 'Ⅲ级事件'},
        {value: 'Ⅳ级事件'}],
      reportTypeoption: [
        {value: '护理-跌倒事件',},
        {value: '护理-坠床事件'},
        {value: '护理-压疮事件'},
        {value: '护理-管路滑脱事件'},
        {value: '护理-给药差错事件'}],
      reportDepartmentoption: [
        {value: '护理部',},
        {value: '儿科'},
        {value: '信息科'},
        {value: '妇产科'},
        {value: '神经科'}
      ],
      processDepartmentoption: [
        {value: '护理部',},
        {value: '儿科'},
        {value: '信息科'},
        {value: '妇产科'},
        {value: '神经科'}
      ],
      assistDepartmentoption: [
        {value: '护理部',},
        {value: '儿科'},
        {value: '信息科'},
        {value: '妇产科'},
        {value: '神经科'}
      ]

    }
  },
  value1: '',
  created() {
    this.getList();
  },


  methods: {
    handleQuery() {
      this.getitemList();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}

</script>

<style scoped>
.box {
  margin-top: 25px;
  margin-left: 20px;
  margin-right: 20px;
}

.block {
  margin-top: 30px;
  text-align: center;
}

.lianjie:hover {
  text-decoration: underline;
}

.lianjie {
  color: #2f81d5;
}

</style>
